<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>出生人口数和结婚对数</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 1000px;height:600px;"></div>
    <script>
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;

        // 假设男孩和女孩的比例为 1.05:1（根据实际情况调整）
        var boyRatio = 1.05;
        var girlRatio = 1;

        // 计算男孩和女孩的数量
        var boyPopulation = [];
        var girlPopulation = [];
        var totalPopulation = [1593, 1584, 1582, 1591, 1607, 1615, 1588, 1604, 1635, 1640, 1687, 1655, 1786, 1723, 1523, 1465, 1200, 1062, 956, 902];
        for (var i = 0; i < totalPopulation.length; i++) {
            boyPopulation.push(totalPopulation[i] * boyRatio / (boyRatio + girlRatio));
            girlPopulation.push(totalPopulation[i] * girlRatio / (boyRatio + girlRatio));
        }

        option = {
            title: {
                text: '最近20年出生人口数和结婚对数',
                left: 'center'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                }
            },
            legend: {
                data: ['男孩数量（万人）', '女孩数量（万人）', '结婚对数（万对）'],
                top: '10%'
            },
            xAxis: {
                type: 'category',
                data: ['2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020', '2021', '2022', '2023']
            },
            yAxis: [
                {
                    type: 'value',
                    name: '人口数（万人）',
                    position: 'left',
                    axisLabel: {
                        formatter: '{value} 万人'
                    }
                },
                {
                    type: 'value',
                    name: '结婚对数（万对）',
                    position: 'right',
                    axisLabel: {
                        formatter: '{value} 万对'
                    }
                }
            ],
            series: [
                {
                    name: '男孩数量（万人）',
                    type: 'bar',
                    stack: 'total',
                    data: boyPopulation,
                    itemStyle: {
                        color: '#4B7BEC'
                    }
                },
                {
                    name: '女孩数量（万人）',
                    type: 'bar',
                    stack: 'total',
                    data: girlPopulation,
                    itemStyle: {
                        color: '#FF6B6B'
                    }
                },
                {
                    name: '结婚对数（万对）',
                    type: 'line',
                    yAxisIndex: 1,
                    data: [867.2, 823.1, 945.0, 991.4, 1098.3, 1212.4, 1241.0, 1302.36, 1323.59, 1346.93, 1306.74, 1224.71, 1142.82, 1063.10, 1013.90, 927.30, 814.30, 764.30, 683.50, 768.00],
                    lineStyle: {
                        color: '#FFA500'
                    },
                    itemStyle: {
                        color: '#FFA500'
                    }
                }
            ]
        };

        option && myChart.setOption(option);
    </script>
</body>
</html>